<template>
    <div class="detail">
      <headerComponent :router="backRouter"></headerComponent>
      <div style="padding: 10px 40px 0;">
        <video-player v-if="itemObj.videoPath" class="video-player-box"
                       ref="videoPlayer"
                       :options="playerOptions"
                       :playsinline="true"
                       customEventName="customstatechangedeventname"

                       @play="onPlayerPlay($event)"
                       @pause="onPlayerPause($event)"
                       @ended="onPlayerEnded($event)"
                       @waiting="onPlayerWaiting($event)"
                       @playing="onPlayerPlaying($event)"
                       @loadeddata="onPlayerLoadeddata($event)"
                       @timeupdate="onPlayerTimeupdate($event)"
                       @canplay="onPlayerCanplay($event)"
                       @canplaythrough="onPlayerCanplaythrough($event)"

                       @statechanged="playerStateChanged($event)"
                       @ready="playerReadied">
        </video-player>
        <div v-html="itemObj.content"></div>
      </div>
    </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import headerComponent from '../components/header'
export default {
  components: {
    videoPlayer,
    headerComponent
  },
  name: 'detail',
  data () {
    return {
      backRouter: '/model/',
      itemObj: {},
      // videojs options
      playerOptions: {
        height: '360',
        autoplay: false,
        muted: false,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'video/mp4',
          src: ''
        }],
        poster: ''
      }
    }
  },
  mounted () {
    let data = localStorage.getItem('data')
    let dataObj = JSON.parse(data)
    let moduleId = this.$route.query.moduleId
    let id = parseInt(this.$route.query.id)
    this.backRouter = this.backRouter + parseInt(this.$route.query.moduleId)
    this.itemObj = dataObj[`M-${moduleId}`].find(item => item.id === id)
    this.playerOptions.sources[0].src = this.itemObj.videoPath
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    // listen event
    onPlayerPlay (player) {
      // console.log('player play!', player)
    },
    onPlayerPause (player) {
      // console.log('player pause!', player)
    },
    onPlayerEnded (player) {
      // console.log('player ended!', player)
    },
    onPlayerLoadeddata (player) {
      // console.log('player Loadeddata!', player)
    },
    onPlayerWaiting (player) {
      // console.log('player Waiting!', player)
    },
    onPlayerPlaying (player) {
      // console.log('player Playing!', player)
    },
    onPlayerTimeupdate (player) {
      // console.log('player Timeupdate!', player.currentTime())
    },
    onPlayerCanplay (player) {
      // console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough (player) {
      // console.log('player Canplaythrough!', player)
    },

    // or listen state event
    playerStateChanged (playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },

    // player is ready
    playerReadied (player) {
      // seek to 10s
      console.log('example player 1 readied', player)
      player.currentTime(10)
      // console.log('example 01: the player is readied', player)
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.detail
  width 100%
  height 100%
  box-sizing border-box
  .video-player-box
    margin-bottom 20px
    .video-js
      width 100%
      .vjs-big-play-button
        top 50%
        left 50%
        margin-top -1.5em
        margin-left -1.5em
</style>
